<template>
  <div id="app">
    <input type="button" value="浪起来" @click="stop1" />
    <input type="button" value="停止" @click="stopOut" />

    <h3>{{ msg }}</h3>
  </div>
</template>

<script>
export default {
  name: "app",
  components: {},
  props: {},
  data() {
    return {
      msg: "我拿Buff,谢谢~",
      intervalId: null,
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    stop1() {
      if (this.intervalId != null) return;
      this.intervalId = setInterval(() => {
        const start = this.msg.substring(0, 1);
        const end = this.msg.substring(1);
        this.msg = end + start;
      }, 300);
    },
    stopOut() {
      clearInterval(this.intervalId);
      this.intervalId = null;
    },
  },
};
</script>

<style scoped></style>
